<FluentDesignTheme @bind-Mode="@Mode"
                   @bind-OfficeColor="@OfficeColor"
                   OnLoaded="@OnLoaded"
                   OnLuminanceChanged="@OnLuminanceChanged"
                   StorageName="theme" />

<div style="min-height: 250px;">
    <FluentGrid>
        <FluentGridItem>
            <FluentSelect Label="Theme"
                          Width="250px"
                          Items="@(Enum.GetValues<DesignThemeModes>())"
                          @bind-SelectedOption="@Mode" />
        </FluentGridItem>

        <FluentGridItem>
            <FluentSelect Label="Color"
                          Items="@(Enum.GetValues<OfficeColor>().Select(i => (OfficeColor?)i))"
                          Height="200px"
                          Width="250px"
                          @bind-SelectedOption="@OfficeColor">
                <OptionTemplate>  
                    <FluentStack>
                        <FluentIcon Value="@(new Icons.Filled.Size20.RectangleLandscape())"
                                    Color="Color.Custom"
                                    CustomColor="@(@context.ToAttributeValue() != "default" ? context.ToAttributeValue() : "#036ac4" )" />
                        <FluentLabel>@context</FluentLabel>  
                    </FluentStack>
                </OptionTemplate> 
            </FluentSelect>
            <FluentButton Appearance="Appearance.Accent" OnClick="PickRandomColor">Feeling lucky?</FluentButton>
        </FluentGridItem>
    </FluentGrid>

    <FluentStack Style="margin: 30px 0px; padding: 30px; border: 1px solid var(--accent-fill-rest);">
        <FluentIcon Value="@(new Icons.Regular.Size24.Airplane())" />
        <FluentLabel>Example of content</FluentLabel>
        <FluentButton Appearance="Appearance.Outline">Outline button</FluentButton>
        <FluentButton Appearance="Appearance.Accent">Accent button</FluentButton>
    </FluentStack>
</div>

@code
{
    public DesignThemeModes Mode { get; set; }



    public OfficeColor? OfficeColor { get; set; }

    void OnLoaded(LoadedEventArgs e)
    {
        DemoLogger.WriteLine($"Loaded: {(e.Mode == DesignThemeModes.System ? "System" : "")} {(e.IsDark ? "Dark" : "Light")}");
    }

    void OnLuminanceChanged(LuminanceChangedEventArgs e)
    {
        DemoLogger.WriteLine($"Changed: {(e.Mode == DesignThemeModes.System ? "System" : "")} {(e.IsDark ? "Dark" : "Light")}");
    }

    void PickRandomColor()
    {
        OfficeColor = OfficeColorUtilities.GetRandom();
    }
}